<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>spirite preview</title>
	<link href="less/demo.less" rel="stylesheet/less">
</head>
<body>
	
		<h1>all "bg" background style </h1>
		<div class="demo_bg_area">
			<div>
				<h3>.x-bg-h_29_txt-center</h3>
				<div class="bg-h_29_txt-center" style="height:29px;">height:29px;</div>
			</div>
			<div>
				<h3>.x-bg-h_56_entry</h3>
				<div class="bg-h_56_entry" style="height:56px;">height:56px;</div>
			</div>
			<div>
				<h3>.x-bg-h_85_racks</h3>
				<div class="bg-h_85_racks" style="height:85px;">height:85px;</div>
			</div>
			
		</div>
	
	
		<h1>all "ixpic" style </h1>
		<div class="demo_pic_area">
			<div>
				<h3>.x-ixpic-is-next-hover</h3>
				<span class="ixpic-is-next-hover" style="width: 20px; height:50px;"></span>
				<span class="label">width: 20px; height:50px;</span>
			</div>
			<div>
				<h3>.x-ixpic-cb-uncheck</h3>
				<span class="ixpic-cb-uncheck" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-next-hover</h3>
				<span class="ixpic-dt-next-hover" style="width: 12px; height:6px;"></span>
				<span class="label">width: 12px; height:6px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-next</h3>
				<span class="ixpic-dt-next" style="width: 12px; height:6px;"></span>
				<span class="label">width: 12px; height:6px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-nextm-hover</h3>
				<span class="ixpic-dt-nextm-hover" style="width: 6px; height:10px;"></span>
				<span class="label">width: 6px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-nextm</h3>
				<span class="ixpic-dt-nextm" style="width: 6px; height:10px;"></span>
				<span class="label">width: 6px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-nexty-hover</h3>
				<span class="ixpic-dt-nexty-hover" style="width: 10px; height:10px;"></span>
				<span class="label">width: 10px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-nexty</h3>
				<span class="ixpic-dt-nexty" style="width: 10px; height:10px;"></span>
				<span class="label">width: 10px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-prev-hover</h3>
				<span class="ixpic-dt-prev-hover" style="width: 12px; height:6px;"></span>
				<span class="label">width: 12px; height:6px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-prev</h3>
				<span class="ixpic-dt-prev" style="width: 12px; height:6px;"></span>
				<span class="label">width: 12px; height:6px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-prevm-hover</h3>
				<span class="ixpic-dt-prevm-hover" style="width: 6px; height:10px;"></span>
				<span class="label">width: 6px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-prevm</h3>
				<span class="ixpic-dt-prevm" style="width: 6px; height:10px;"></span>
				<span class="label">width: 6px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-prevy-hover</h3>
				<span class="ixpic-dt-prevy-hover" style="width: 10px; height:10px;"></span>
				<span class="label">width: 10px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-prevy</h3>
				<span class="ixpic-dt-prevy" style="width: 10px; height:10px;"></span>
				<span class="label">width: 10px; height:10px;</span>
			</div>
			<div>
				<h3>.x-ixpic-dt-icon</h3>
				<span class="ixpic-dt-icon" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-ixpic-is-next</h3>
				<span class="ixpic-is-next" style="width: 20px; height:50px;"></span>
				<span class="label">width: 20px; height:50px;</span>
			</div>
			<div>
				<h3>.x-ixpic-is-prev-hover</h3>
				<span class="ixpic-is-prev-hover" style="width: 20px; height:50px;"></span>
				<span class="label">width: 20px; height:50px;</span>
			</div>
			<div>
				<h3>.x-ixpic-is-prev</h3>
				<span class="ixpic-is-prev" style="width: 20px; height:50px;"></span>
				<span class="label">width: 20px; height:50px;</span>
			</div>
			<div>
				<h3>.x-ixpic-pg-next-disable</h3>
				<span class="ixpic-pg-next-disable" style="width: 6px; height:9px;"></span>
				<span class="label">width: 6px; height:9px;</span>
			</div>
			<div>
				<h3>.x-ixpic-pg-next-hover</h3>
				<span class="ixpic-pg-next-hover" style="width: 6px; height:9px;"></span>
				<span class="label">width: 6px; height:9px;</span>
			</div>
			<div>
				<h3>.x-ixpic-pg-next</h3>
				<span class="ixpic-pg-next" style="width: 6px; height:9px;"></span>
				<span class="label">width: 6px; height:9px;</span>
			</div>
			<div>
				<h3>.x-ixpic-pg-prev-disable</h3>
				<span class="ixpic-pg-prev-disable" style="width: 6px; height:9px;"></span>
				<span class="label">width: 6px; height:9px;</span>
			</div>
			<div>
				<h3>.x-ixpic-pg-prev-hover</h3>
				<span class="ixpic-pg-prev-hover" style="width: 6px; height:9px;"></span>
				<span class="label">width: 6px; height:9px;</span>
			</div>
			<div>
				<h3>.x-ixpic-pg-prev</h3>
				<span class="ixpic-pg-prev" style="width: 6px; height:9px;"></span>
				<span class="label">width: 6px; height:9px;</span>
			</div>
			<div>
				<h3>.x-ixpic-radio-checked-disable</h3>
				<span class="ixpic-radio-checked-disable" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-ixpic-radio-checked</h3>
				<span class="ixpic-radio-checked" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-ixpic-radio-uncheck</h3>
				<span class="ixpic-radio-uncheck" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-ixpic-radio-unchecked-disable</h3>
				<span class="ixpic-radio-unchecked-disable" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-ixpic-cb-checked</h3>
				<span class="ixpic-cb-checked" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			
		</div>
	
		<h1>all "pic" style </h1>
		<div class="demo_pic_area">
			<div>
				<h3>.x-pic-nav-sys</h3>
				<span class="pic-nav-sys" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-arr-down</h3>
				<span class="pic-arr-down" style="width: 8px; height:5px;"></span>
				<span class="label">width: 8px; height:5px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow-down</h3>
				<span class="pic-arrow-down" style="width: 12px; height:12px;"></span>
				<span class="label">width: 12px; height:12px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow-left</h3>
				<span class="pic-arrow-left" style="width: 12px; height:12px;"></span>
				<span class="label">width: 12px; height:12px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow-tree-down</h3>
				<span class="pic-arrow-tree-down" style="width: 12px; height:12px;"></span>
				<span class="label">width: 12px; height:12px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow-tree-right</h3>
				<span class="pic-arrow-tree-right" style="width: 12px; height:12px;"></span>
				<span class="label">width: 12px; height:12px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow-up-rack</h3>
				<span class="pic-arrow-up-rack" style="width: 12px; height:7px;"></span>
				<span class="label">width: 12px; height:7px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow-up</h3>
				<span class="pic-arrow-up" style="width: 12px; height:12px;"></span>
				<span class="label">width: 12px; height:12px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow</h3>
				<span class="pic-arrow" style="width: 10px; height:9px;"></span>
				<span class="label">width: 10px; height:9px;</span>
			</div>
			<div>
				<h3>.x-pic-avatar</h3>
				<span class="pic-avatar" style="width: 20px; height:24px;"></span>
				<span class="label">width: 20px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-bg-handel</h3>
				<span class="pic-bg-handel" style="width: 38px; height:20px;"></span>
				<span class="label">width: 38px; height:20px;</span>
			</div>
			<div>
				<h3>.x-pic-border-bottom</h3>
				<span class="pic-border-bottom" style="width: 129px; height:1px;"></span>
				<span class="label">width: 129px; height:1px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-cancel2-disable</h3>
				<span class="pic-btn-cancel2-disable" style="width: 87px; height:28px;"></span>
				<span class="label">width: 87px; height:28px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-cancel2-hover</h3>
				<span class="pic-btn-cancel2-hover" style="width: 87px; height:28px;"></span>
				<span class="label">width: 87px; height:28px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-cancel2</h3>
				<span class="pic-btn-cancel2" style="width: 87px; height:28px;"></span>
				<span class="label">width: 87px; height:28px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-confirm-disable</h3>
				<span class="pic-btn-confirm-disable" style="width: 87px; height:28px;"></span>
				<span class="label">width: 87px; height:28px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-confirm</h3>
				<span class="pic-btn-confirm" style="width: 87px; height:28px;"></span>
				<span class="label">width: 87px; height:28px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-confirm-hover</h3>
				<span class="pic-btn-confirm-hover" style="width: 87px; height:28px;"></span>
				<span class="label">width: 87px; height:28px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-delrack-disable</h3>
				<span class="pic-btn-delrack-disable" style="width: 70px; height:35px;"></span>
				<span class="label">width: 70px; height:35px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-delrack-hover</h3>
				<span class="pic-btn-delrack-hover" style="width: 70px; height:35px;"></span>
				<span class="label">width: 70px; height:35px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-delrack</h3>
				<span class="pic-btn-delrack" style="width: 70px; height:35px;"></span>
				<span class="label">width: 70px; height:35px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-handle-hover</h3>
				<span class="pic-btn-handle-hover" style="width: 46px; height:26px;"></span>
				<span class="label">width: 46px; height:26px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-handle</h3>
				<span class="pic-btn-handle" style="width: 46px; height:26px;"></span>
				<span class="label">width: 46px; height:26px;</span>
			</div>
			<div>
				<h3>.x-pic-circle-bottom</h3>
				<span class="pic-circle-bottom" style="width: 32px; height:32px;"></span>
				<span class="label">width: 32px; height:32px;</span>
			</div>
			<div>
				<h3>.x-pic-circle-bottoms</h3>
				<span class="pic-circle-bottoms" style="width: 22px; height:22px;"></span>
				<span class="label">width: 22px; height:22px;</span>
			</div>
			<div>
				<h3>.x-pic-circle-top</h3>
				<span class="pic-circle-top" style="width: 28px; height:28px;"></span>
				<span class="label">width: 28px; height:28px;</span>
			</div>
			<div>
				<h3>.x-pic-circle-tops</h3>
				<span class="pic-circle-tops" style="width: 20px; height:20px;"></span>
				<span class="label">width: 20px; height:20px;</span>
			</div>
			<div>
				<h3>.x-pic-detail</h3>
				<span class="pic-detail" style="width: 66px; height:26px;"></span>
				<span class="label">width: 66px; height:26px;</span>
			</div>
			<div>
				<h3>.x-pic-edit-racks-hover</h3>
				<span class="pic-edit-racks-hover" style="width: 14px; height:12px;"></span>
				<span class="label">width: 14px; height:12px;</span>
			</div>
			<div>
				<h3>.x-pic-edit-racks</h3>
				<span class="pic-edit-racks" style="width: 14px; height:12px;"></span>
				<span class="label">width: 14px; height:12px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-account-hover</h3>
				<span class="pic-entry-account-hover" style="width: 16px; height:20px;"></span>
				<span class="label">width: 16px; height:20px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-account</h3>
				<span class="pic-entry-account" style="width: 16px; height:20px;"></span>
				<span class="label">width: 16px; height:20px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-pwd-hover</h3>
				<span class="pic-entry-pwd-hover" style="width: 16px; height:20px;"></span>
				<span class="label">width: 16px; height:20px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-pwd</h3>
				<span class="pic-entry-pwd" style="width: 16px; height:20px;"></span>
				<span class="label">width: 16px; height:20px;</span>
			</div>
			<div>
				<h3>.x-pic-export-hover</h3>
				<span class="pic-export-hover" style="width: 70px; height:35px;"></span>
				<span class="label">width: 70px; height:35px;</span>
			</div>
			<div>
				<h3>.x-pic-export</h3>
				<span class="pic-export" style="width: 70px; height:35px;"></span>
				<span class="label">width: 70px; height:35px;</span>
			</div>
			<div>
				<h3>.x-pic-GB</h3>
				<span class="pic-GB" style="width: 17px; height:50px;"></span>
				<span class="label">width: 17px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-GBs</h3>
				<span class="pic-GBs" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-handeled</h3>
				<span class="pic-handeled" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-pic-ico-delete-hover</h3>
				<span class="pic-ico-delete-hover" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-ico-delete</h3>
				<span class="pic-ico-delete" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-ico-edit</h3>
				<span class="pic-ico-edit" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-ico-login</h3>
				<span class="pic-ico-login" style="width: 46px; height:26px;"></span>
				<span class="label">width: 46px; height:26px;</span>
			</div>
			<div>
				<h3>.x-pic-ico-search</h3>
				<span class="pic-ico-search" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-pic-icon-delete-hover</h3>
				<span class="pic-icon-delete-hover" style="width: 15px; height:15px;"></span>
				<span class="label">width: 15px; height:15px;</span>
			</div>
			<div>
				<h3>.x-pic-icon-delete</h3>
				<span class="pic-icon-delete" style="width: 15px; height:15px;"></span>
				<span class="label">width: 15px; height:15px;</span>
			</div>
			<div>
				<h3>.x-pic-icon-edit-hover</h3>
				<span class="pic-icon-edit-hover" style="width: 15px; height:15px;"></span>
				<span class="label">width: 15px; height:15px;</span>
			</div>
			<div>
				<h3>.x-pic-icon-edit</h3>
				<span class="pic-icon-edit" style="width: 15px; height:15px;"></span>
				<span class="label">width: 15px; height:15px;</span>
			</div>
			<div>
				<h3>.x-pic-nav-device</h3>
				<span class="pic-nav-device" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-nav-fault</h3>
				<span class="pic-nav-fault" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-nav-monitor</h3>
				<span class="pic-nav-monitor" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-pic-arrow-down-rack</h3>
				<span class="pic-arrow-down-rack" style="width: 12px; height:7px;"></span>
				<span class="label">width: 12px; height:7px;</span>
			</div>
			<div>
				<h3>.x-pic-no-handel</h3>
				<span class="pic-no-handel" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-pic-num0</h3>
				<span class="pic-num0" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num1</h3>
				<span class="pic-num1" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num2</h3>
				<span class="pic-num2" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num3</h3>
				<span class="pic-num3" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num4</h3>
				<span class="pic-num4" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num5</h3>
				<span class="pic-num5" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num6</h3>
				<span class="pic-num6" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num7</h3>
				<span class="pic-num7" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num8</h3>
				<span class="pic-num8" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-num9</h3>
				<span class="pic-num9" style="width: 32px; height:50px;"></span>
				<span class="label">width: 32px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-nums0</h3>
				<span class="pic-nums0" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums1</h3>
				<span class="pic-nums1" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums2</h3>
				<span class="pic-nums2" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums3</h3>
				<span class="pic-nums3" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums4</h3>
				<span class="pic-nums4" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums5</h3>
				<span class="pic-nums5" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums6</h3>
				<span class="pic-nums6" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums7</h3>
				<span class="pic-nums7" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums8</h3>
				<span class="pic-nums8" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-nums9</h3>
				<span class="pic-nums9" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-percent</h3>
				<span class="pic-percent" style="width: 21px; height:50px;"></span>
				<span class="label">width: 21px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-percents</h3>
				<span class="pic-percents" style="width: 23px; height:36px;"></span>
				<span class="label">width: 23px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-pg-arrow</h3>
				<span class="pic-pg-arrow" style="width: 11px; height:5px;"></span>
				<span class="label">width: 11px; height:5px;</span>
			</div>
			<div>
				<h3>.x-pic-point</h3>
				<span class="pic-point" style="width: 13px; height:50px;"></span>
				<span class="label">width: 13px; height:50px;</span>
			</div>
			<div>
				<h3>.x-pic-points</h3>
				<span class="pic-points" style="width: 12px; height:36px;"></span>
				<span class="label">width: 12px; height:36px;</span>
			</div>
			<div>
				<h3>.x-pic-print-hover</h3>
				<span class="pic-print-hover" style="width: 70px; height:35px;"></span>
				<span class="label">width: 70px; height:35px;</span>
			</div>
			<div>
				<h3>.x-pic-print</h3>
				<span class="pic-print" style="width: 70px; height:35px;"></span>
				<span class="label">width: 70px; height:35px;</span>
			</div>
			<div>
				<h3>.x-pic-rack-next-hover</h3>
				<span class="pic-rack-next-hover" style="width: 39px; height:57px;"></span>
				<span class="label">width: 39px; height:57px;</span>
			</div>
			<div>
				<h3>.x-pic-rack-next</h3>
				<span class="pic-rack-next" style="width: 39px; height:57px;"></span>
				<span class="label">width: 39px; height:57px;</span>
			</div>
			<div>
				<h3>.x-pic-rack-prev-hover</h3>
				<span class="pic-rack-prev-hover" style="width: 39px; height:57px;"></span>
				<span class="label">width: 39px; height:57px;</span>
			</div>
			<div>
				<h3>.x-pic-rack-prev</h3>
				<span class="pic-rack-prev" style="width: 39px; height:57px;"></span>
				<span class="label">width: 39px; height:57px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-logo0</h3>
				<span class="pic-entry-logo0" style="width: 84px; height:84px;"></span>
				<span class="label">width: 84px; height:84px;</span>
			</div>
			<div>
				<h3>.x-pic-rack-dropdown-hover</h3>
				<span class="pic-rack-dropdown-hover" style="width: 178px; height:25px;"></span>
				<span class="label">width: 178px; height:25px;</span>
			</div>
			<div>
				<h3>.x-pic-rack-dropdown</h3>
				<span class="pic-rack-dropdown" style="width: 178px; height:25px;"></span>
				<span class="label">width: 178px; height:25px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-btn-hover</h3>
				<span class="pic-entry-btn-hover" style="width: 330px; height:42px;"></span>
				<span class="label">width: 330px; height:42px;</span>
			</div>
			<div>
				<h3>.x-pic-racks-l</h3>
				<span class="pic-racks-l" style="width: 118px; height:85px;"></span>
				<span class="label">width: 118px; height:85px;</span>
			</div>
			<div>
				<h3>.x-pic-racks-r</h3>
				<span class="pic-racks-r" style="width: 118px; height:85px;"></span>
				<span class="label">width: 118px; height:85px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-btn</h3>
				<span class="pic-entry-btn" style="width: 330px; height:42px;"></span>
				<span class="label">width: 330px; height:42px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-input-hover</h3>
				<span class="pic-entry-input-hover" style="width: 330px; height:42px;"></span>
				<span class="label">width: 330px; height:42px;</span>
			</div>
			<div>
				<h3>.x-pic-entry-input</h3>
				<span class="pic-entry-input" style="width: 330px; height:42px;"></span>
				<span class="label">width: 330px; height:42px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-addrack-hover</h3>
				<span class="pic-btn-addrack-hover" style="width: 143px; height:143px;"></span>
				<span class="label">width: 143px; height:143px;</span>
			</div>
			<div>
				<h3>.x-pic-btn-addrack</h3>
				<span class="pic-btn-addrack" style="width: 143px; height:143px;"></span>
				<span class="label">width: 143px; height:143px;</span>
			</div>
			<div>
				<h3>.x-pic-circleLs</h3>
				<span class="pic-circleLs" style="width: 122px; height:244px;"></span>
				<span class="label">width: 122px; height:244px;</span>
			</div>
			<div>
				<h3>.x-pic-circleRs</h3>
				<span class="pic-circleRs" style="width: 122px; height:244px;"></span>
				<span class="label">width: 122px; height:244px;</span>
			</div>
			<div>
				<h3>.x-pic-circleL</h3>
				<span class="pic-circleL" style="width: 165px; height:330px;"></span>
				<span class="label">width: 165px; height:330px;</span>
			</div>
			<div>
				<h3>.x-pic-circleR</h3>
				<span class="pic-circleR" style="width: 165px; height:330px;"></span>
				<span class="label">width: 165px; height:330px;</span>
			</div>
			<div>
				<h3>.x-pic-centres</h3>
				<span class="pic-centres" style="width: 244px; height:244px;"></span>
				<span class="label">width: 244px; height:244px;</span>
			</div>
			<div>
				<h3>.x-pic-circles</h3>
				<span class="pic-circles" style="width: 244px; height:244px;"></span>
				<span class="label">width: 244px; height:244px;</span>
			</div>
			<div>
				<h3>.x-pic-centre</h3>
				<span class="pic-centre" style="width: 330px; height:330px;"></span>
				<span class="label">width: 330px; height:330px;</span>
			</div>
			<div>
				<h3>.x-pic-circle</h3>
				<span class="pic-circle" style="width: 330px; height:330px;"></span>
				<span class="label">width: 330px; height:330px;</span>
			</div>
			
		</div>
	
		<h1>all "line" style </h1>
		<div class="demo_pic_area">
			<div>
				<h3>.x-line-siteR</h3>
				<span class="line-siteR" style="width: 20px; height:20px;"></span>
				<span class="label">width: 20px; height:20px;</span>
			</div>
			<div>
				<h3>.x-line-left-bottom</h3>
				<span class="line-left-bottom" style="width: 30px; height:40px;"></span>
				<span class="label">width: 30px; height:40px;</span>
			</div>
			<div>
				<h3>.x-line-line</h3>
				<span class="line-line" style="width: 1800px; height:1px;"></span>
				<span class="label">width: 1800px; height:1px;</span>
			</div>
			<div>
				<h3>.x-line-right-bottom</h3>
				<span class="line-right-bottom" style="width: 30px; height:40px;"></span>
				<span class="label">width: 30px; height:40px;</span>
			</div>
			<div>
				<h3>.x-line-right-top</h3>
				<span class="line-right-top" style="width: 30px; height:40px;"></span>
				<span class="label">width: 30px; height:40px;</span>
			</div>
			<div>
				<h3>.x-line-site</h3>
				<span class="line-site" style="width: 20px; height:20px;"></span>
				<span class="label">width: 20px; height:20px;</span>
			</div>
			<div>
				<h3>.x-line-left-top</h3>
				<span class="line-left-top" style="width: 30px; height:40px;"></span>
				<span class="label">width: 30px; height:40px;</span>
			</div>
			<div>
				<h3>.x-line-siteY</h3>
				<span class="line-siteY" style="width: 20px; height:20px;"></span>
				<span class="label">width: 20px; height:20px;</span>
			</div>
			<div>
				<h3>.x-line-center</h3>
				<span class="line-center" style="width: 140px; height:140px;"></span>
				<span class="label">width: 140px; height:140px;</span>
			</div>
			<div>
				<h3>.x-line-centerR</h3>
				<span class="line-centerR" style="width: 140px; height:140px;"></span>
				<span class="label">width: 140px; height:140px;</span>
			</div>
			<div>
				<h3>.x-line-centerY</h3>
				<span class="line-centerY" style="width: 140px; height:140px;"></span>
				<span class="label">width: 140px; height:140px;</span>
			</div>
			<div>
				<h3>.x-line-off</h3>
				<span class="line-off" style="width: 140px; height:140px;"></span>
				<span class="label">width: 140px; height:140px;</span>
			</div>
			
		</div>
	
		<h1>all "topo" style </h1>
		<div class="demo_pic_area">
			<div>
				<h3>.x-topo-tcc-0</h3>
				<span class="topo-tcc-0" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-bocc-0</h3>
				<span class="topo-bocc-0" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-bocc-2</h3>
				<span class="topo-bocc-2" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-depot-0</h3>
				<span class="topo-depot-0" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-depot-1</h3>
				<span class="topo-depot-1" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-depot-2</h3>
				<span class="topo-depot-2" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-occ-0</h3>
				<span class="topo-occ-0" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-occ-1</h3>
				<span class="topo-occ-1" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-occ-2</h3>
				<span class="topo-occ-2" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-police-0</h3>
				<span class="topo-police-0" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-police-1</h3>
				<span class="topo-police-1" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-police-2</h3>
				<span class="topo-police-2" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-ptsd-0</h3>
				<span class="topo-ptsd-0" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-ptsd-1</h3>
				<span class="topo-ptsd-1" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-ptsd-2</h3>
				<span class="topo-ptsd-2" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-station-0-l</h3>
				<span class="topo-station-0-l" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-topo-station-0</h3>
				<span class="topo-station-0" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-topo-station-1-l</h3>
				<span class="topo-station-1-l" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-topo-station-1</h3>
				<span class="topo-station-1" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-topo-station-2-l</h3>
				<span class="topo-station-2-l" style="width: 24px; height:24px;"></span>
				<span class="label">width: 24px; height:24px;</span>
			</div>
			<div>
				<h3>.x-topo-station-2</h3>
				<span class="topo-station-2" style="width: 16px; height:16px;"></span>
				<span class="label">width: 16px; height:16px;</span>
			</div>
			<div>
				<h3>.x-topo-stations-0</h3>
				<span class="topo-stations-0" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-stations-1</h3>
				<span class="topo-stations-1" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-stations-2</h3>
				<span class="topo-stations-2" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-bocc-1</h3>
				<span class="topo-bocc-1" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-tcc-1</h3>
				<span class="topo-tcc-1" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-tcc-2</h3>
				<span class="topo-tcc-2" style="width: 48px; height:48px;"></span>
				<span class="label">width: 48px; height:48px;</span>
			</div>
			<div>
				<h3>.x-topo-bocc-0-l</h3>
				<span class="topo-bocc-0-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-bocc-1-l</h3>
				<span class="topo-bocc-1-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-bocc-2-l</h3>
				<span class="topo-bocc-2-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-depot-0-l</h3>
				<span class="topo-depot-0-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-depot-1-l</h3>
				<span class="topo-depot-1-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-occ-0-l</h3>
				<span class="topo-occ-0-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-occ-1-l</h3>
				<span class="topo-occ-1-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-occ-2-l</h3>
				<span class="topo-occ-2-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-police-0-l</h3>
				<span class="topo-police-0-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-police-1-l</h3>
				<span class="topo-police-1-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-police-2-l</h3>
				<span class="topo-police-2-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-depot-2-l</h3>
				<span class="topo-depot-2-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-ptsd-0-l</h3>
				<span class="topo-ptsd-0-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-ptsd-1-l</h3>
				<span class="topo-ptsd-1-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-ptsd-2-l</h3>
				<span class="topo-ptsd-2-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-stations-0-l</h3>
				<span class="topo-stations-0-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-stations-1-l</h3>
				<span class="topo-stations-1-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-stations-2-l</h3>
				<span class="topo-stations-2-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-tcc-0-l</h3>
				<span class="topo-tcc-0-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-tcc-1-l</h3>
				<span class="topo-tcc-1-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-tcc-2-l</h3>
				<span class="topo-tcc-2-l" style="width: 64px; height:64px;"></span>
				<span class="label">width: 64px; height:64px;</span>
			</div>
			<div>
				<h3>.x-topo-cloud</h3>
				<span class="topo-cloud" style="width: 172px; height:110px;"></span>
				<span class="label">width: 172px; height:110px;</span>
			</div>
			
		</div>
	
		<h1>all "logo" style </h1>
		<div class="demo_pic_area">
			<div>
				<h3>.x-logo-logo</h3>
				<span class="logo-logo" style="width: 226px; height:28px;"></span>
				<span class="label">width: 226px; height:28px;</span>
			</div>
			<div>
				<h3>.x-logo-entry-foot</h3>
				<span class="logo-entry-foot" style="width: 360px; height:55px;"></span>
				<span class="label">width: 360px; height:55px;</span>
			</div>
			<div>
				<h3>.x-logo-entry-logo</h3>
				<span class="logo-entry-logo" style="width: 508px; height:88px;"></span>
				<span class="label">width: 508px; height:88px;</span>
			</div>
			
		</div>
	

	<iframe src="./less/demo.less" style="height:800px;width:500px;"></iframe>
</body>
<script src="../src/lib/less.min.js"></script>
</html>